<template>
	<cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
		<el-row type="flex" align="middle" v-if="is_show">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<!-- <cl-add-btn /> -->
			<el-button @click="openManyClassDialog" :disabled="data.multipleSelection.length > 1 ? false : true"
				type="success" size="mini">多班备课</el-button>

			<!-- 删除按钮 -->
			<!-- <cl-multi-delete-btn>批量删除</cl-multi-delete-btn> -->
			<cl-filter label="任课老师">
				<el-select size="mini" clearable v-model="form.class_teacher" @change="searchSubmit" style="width: 60px">
					<!-- <el-option :key="all" value="" label="全部"></el-option> -->
					<el-option v-for="item in teachers_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>
		<el-row v-if="is_show">
			<cl-filter label="班号">
				<el-select size="mini" clearable v-model="form.class_number" @change="searchSubmit" style="width: 20px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in class_number_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="班级日期">
				<el-select size="mini" clearable v-model="form.class_date" @change="searchSubmit" style="width: 60px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in class_date_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="上课教室">
				<el-select size="mini" clearable v-model="form.class_class_classroom" @change="searchSubmit"
					style="width: 60px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in classroom_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="课程类型">
				<el-select size="mini" clearable v-model="form.class_course_type" @change="searchSubmit" style="width: 60px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in course_type" :key="item.value" :value="item.value" :label="item.label"></el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="班级类型">
				<el-select size="mini" clearable v-model="form.class_type" @change="searchSubmit" style="width: 60px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in class_type_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<cl-filter label="学生">
				<el-select size="mini" filterable clearable v-model="form.student_id" @change="searchSubmit"
					style="width: 120px">
					<el-option :key="all" value="" label="全部"></el-option>
					<el-option v-for="item in students_list" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</cl-filter>
			<el-button size="mini" type="success" @click="resetSerach">重置</el-button>
		</el-row>
		<el-row v-if="!is_show">
			<el-form ref="ruleFormRef" :inline="true" :model="searchRuleForm" :rules="searchRules"
				style="margin: auto;" label-width="120px">
				<el-form-item >
			<el-button style="danger" size="mini" type="info" @click="returnBtn()">返回</el-button>

				</el-form-item>
				<el-form-item>
				<cl-flex1 />

				</el-form-item>
			<el-form-item>
			<span style="color:red;font-size:10px;margin:auto"><i>注意：多班备课必须选择课程类型</i></span>
			</el-form-item>
			
				<el-form-item label="课程类型：" prop="manyClassCourseCourseType">
					<el-select size="mini" clearable v-model="searchRuleForm.manyClassCourseCourseType"
						@change="getManyClassStudentClass">
						<!-- <el-option :key="all" value="" label="全部"></el-option> -->
						<el-option v-for="item in course_type" :key="item.value" :value="item.value" :label="item.label">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="课程小主题：" prop="course_theme">
					<el-input size="mini" placeholder="请输入课程小节主题，支持模糊搜索" style="width: 200px"
						v-model="searchRuleForm.course_theme" @keydown.enter="handleSearchCourseTheme"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="success" size="mini" @click="submitForm(ruleFormRef)" style="margin-left: 10px;">查询</el-button>
				</el-form-item>
			</el-form>

		</el-row>
		<el-collapse v-if="!is_show" v-model="activeName" @change="handleChange" accordion>
			<el-collapse-item title="班级学生信息" name="1">
				<template #title>
					班级学生信息
					<cl-flex1 />
					<span style="color:red"><i>{{ activeName === "1" ? "点我收起" : "点我展开" }}</i></span>
				</template>
				<el-row v-if="!is_show">
					<el-descriptions title="" style="width: 100%; height: 100%; margin-top: 10px" border size="mini" column="4"
						ref="classInfo">
						<el-descriptions-item align="center" label="班级名称">
							<el-tag size="mini" v-for="item in classNames(classgroupInfoList.name)" :key="item">{{ item }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center" label="班级开课时间">
							<el-tag size="mini">{{ classgroupInfoList.start_date }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center" label="班级结课时间">
							<el-tag size="mini">{{ classgroupInfoList.end_date }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center"
							label="每周上课时间：">
							<el-tag size="mini">{{ classgroupInfoList.class_time }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center" label="上课教室">
							<el-tag size="mini">{{ classgroupInfoList.classroom }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center" label="授课老师">
							<el-tag size="mini">{{ classgroupInfoList.teacherName }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item v-if="data.multipleSelection.length > 1 ? false : true" align="center" label="班级课程类型">
							<el-tag size="mini">{{ classgroupInfoList.course_name }}</el-tag>
						</el-descriptions-item>
						<el-descriptions-item align="center" label="班级学生">
							<el-tag size="mini" v-for="item in classNames(classgroupInfoList.studentName)" :key="item">{{ item }}
							</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</el-row>
			</el-collapse-item>
		</el-collapse>
		<el-row>
			<!-- 展示区域 -->
			<el-tabs v-fit-columns type="border-card" :ref="setRefs('elTabs')" class="root" v-model="elTabSelect"
				v-if="!is_show && data.multipleSelection.length < 1">
				<el-tab-pane style="display: none; height: 100%; overflow-y: auto; overflow-x: hidden" label="课程大主题">
					<el-table v-fit-columns :data="allCourseSystem" :max-height="tableHeight"
						:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border
						style="width: 100%">
						<el-table-column type="index" width="50" />
						<el-table-column prop="phase_name" label="课程大主题" width="200" />
						<el-table-column prop="phase_course_introduce" label="课程大主题介绍" width="300" />
						<el-table-column prop="studentName" label="课程小主题：上课学生">
							<template #default="scope">
								<el-card shadow="always" size="mini" v-for="item in handleCourseStudents(scope.row.studentName)"
									style="padding: 0px" :body-style="{ padding: '5px', textAlign: 'left' }" :key="item">
									<el-tag size="mini" :type="handleCourseStudents2(item1, index1)"
										v-for="(item1, index1) in handleCourseStudents1(item)" :key="item1">
										{{ index1 === 0 ? item1 : item1.slice(1) }}
									</el-tag>
								</el-card>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane style="height: 100%; overflow-y: auto; overflow-x: hidden" label="班级学生上课记录" name="classStudent">
					<el-table :data="allClassCourseStudents" border v-fit-columns :header-cell-style="{ 'text-align': 'center' }"
						:cell-style="{ 'text-align': 'center' }" :max-height="tableHeight" style="width: 100%"
						ref="classCourseTable">
						<el-table-column type="index" width="50" />
						<el-table-column prop="section_theme" label="课程小主题" width="200" />
						<el-table-column prop="phase_name" label="课程大主题" width="250" :filters="phaseNameFilters"
							:filter-method="filterHandler" />
						<el-table-column prop="isUse" width="140" label="是否启用" :filters="isUseFilters" :filtered-value="[true]"
							:filter-method="isUsefilterHandler">
							<template #default="scope">
								<el-switch v-model="scope.row.isUse" disabled inline-prompt active-text="启用" inactive-text="停用" />
							</template>
						</el-table-column>
						<el-table-column prop="studentName" label="上课学生">
							<template #default="scope">
								<el-tag size="mini" :type="item1.slice(0, 1) === '1' ? 'warning' : ''"
									v-for="item1 in handleCourseStudents1(scope.row.studentName)" :key="item1">
									{{ item1 }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template #default="scope">
								<el-button type="info" size="mini" @click="openCourseSourceInfo(scope.row.id)">查看</el-button>

							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane style="height: 100%; overflow-y: auto; overflow-x: hidden" label="班级学生">
					<el-table :data="classgroup_students" border v-fit-columns :max-height="tableHeight"
						:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" style="width: 100%"
						ref="classgroupStudents">
						<el-table-column type="index" width="50" />
						<!-- <el-table-column prop="student_id" label="学生ID" /> -->
						<el-table-column prop="name" label="学生姓名" />
						<el-table-column prop="common_num" label="总课时-常规课" />
						<el-table-column prop="common_use_num" label="使用课时" />
						<el-table-column prop="common_leave_num" label="剩余课时" />
						<!-- <el-table-column prop="special_num" label="特殊课总课时" /> -->
						<!-- <el-table-column prop="special_use_num" label="特殊课使用课时" /> -->
						<!-- <el-table-column prop="special_leave_num" label="特殊课剩余课时" /> -->

						<el-table-column fixed="right" label="操作">
							<template #default="scope">
								<el-button type="success" size="mini" @click="getClassStudentsClassDetail(scope.row.student_id)">查看上课明细
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<el-tabs v-fit-columns type="border-card" :ref="setRefs('elTabsMultipleSelection')" class="root"
				v-if="!is_show && data.multipleSelection.length > 1">
				<el-tab-pane style="height: 100%; overflow-y: auto; overflow-x: hidden" label="班级学生上课记录">
					<el-table :data="allClassCourseStudents" border v-fit-columns :header-cell-style="{ 'text-align': 'center' }"
						:cell-style="{ 'text-align': 'center' }" :max-height="tableHeight" style="width: 100%"
						ref="classCourseTable">
						<el-table-column type="index" width="50" />
						<el-table-column prop="section_theme" label="课程小主题" width="200" />
						<el-table-column prop="phase_name" label="课程大主题" width="250" :filters="phaseNameFilters"
							:filter-method="filterHandler" />
						<el-table-column prop="isUse" width="140" label="是否启用" :filters="isUseFilters" :filtered-value="[true]"
							:filter-method="isUsefilterHandler" >
							<template #default="scope">
								<el-switch v-model="scope.row.isUse" disabled inline-prompt active-text="启用" inactive-text="停用" />
							</template>
						</el-table-column>
						<el-table-column prop="studentName" label="上课学生">
							<template #default="scope">
								<el-tag size="mini" :type="item1.slice(0, 1) === '1' ? 'warning' : ''"
									v-for="item1 in handleCourseStudents1(scope.row.studentName)" :key="item1">
									{{ item1 }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template #default="scope">
								<el-button type="info" size="mini" @click="openCourseSourceInfo(scope.row.id)">查看</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" :show-summary="true" v-bind="table" v-if="is_show"
				@selection-change="handleSelectionChange">
				<template #column-start_date="{ scope }">
					{{ scope.row.start_date.slice(0, 10) }}
				</template>
				<template #column-end_date="{ scope }">
					{{ scope.row.end_date.slice(0, 10) }}
				</template>
				<template #column-class_students="{ scope }">
					<el-tag v-for="(item, index) in scope.row.class_students_list" :key="index" disable-transitions size="small"
						effect="dark" style="margin: 2px">{{ item }}</el-tag>
				</template>
				<template #column-class_time="{ scope }">
					<el-tag size="mini">
						{{ scope.row.class_week + "：" + scope.row.class_start_time + "-" + scope.row.class_end_time }}
					</el-tag>
				</template>
				<template #slot-btn="{ scope }">
					<el-button type="text" size="mini" @click="show(scope.row.id, scope.row.class_course_type)">查看</el-button>
				</template>
			</cl-table>
		</el-row>

		<el-row type="flex" v-if="is_show">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
		<!-- 课程详细对话框 -->
		<el-dialog v-model="courseSourcedialogVisible" title="课程详细信息" width="50%" :before-close="courseSourcehandleClose">
			<el-descriptions class="margin-top" title="" :column="2" :size="size" border>
				<!-- <template #extra>
      <el-button type="primary" size="small">Operation</el-button>
    </template> -->
				<el-descriptions-item>
					<template #label> 课程ID </template>
					{{ courseSourceInfo.id }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 课程小节主题 </template>
					{{ courseSourceInfo.section_theme }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 难度等级 </template>
					<el-tag size="small">{{ handelLevel(courseSourceInfo.level) }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 课程类型 </template>
					{{ courseSourceInfo.course_type + "-" + courseSourceInfo.course_name }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 课程时长 </template>
					{{ courseSourceInfo.course_time }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 课程大主题 </template>
					{{ courseSourceInfo.phase_name }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 幼儿五大主题 </template>
					{{ courseSourceInfo.child_five_theme }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 科学原理 </template>
					{{ courseSourceInfo.scientific }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 课程GBC </template>
					<el-tag size="mini" v-for="item in handelStr(courseSourceInfo.course_gbc)" :key="item">{{ item }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 程序设计 </template>
					<el-tag size="mini" v-for="item in handelStr(courseSourceInfo.program_design)" :key="item">{{ item }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 是否启用 </template>
					<el-switch v-model="courseSourceInfo.isUse" disabled inline-prompt active-text="启用" inactive-text="停用" />
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 机械原理 </template>
					<el-tag size="mini" v-for="item in handelStr(courseSourceInfo.mechanical)" :key="item">{{ item }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 课程排序 </template>
					{{ courseSourceInfo.sort }}
				</el-descriptions-item>

				<el-descriptions-item span="2">
					<template #label> 学习目标 </template>
					{{ courseSourceInfo.learning_goals }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 课程来源 </template>
					{{ courseSourceInfo.course_from }}
				</el-descriptions-item>
				<el-descriptions-item span="2">
					<template #label> 教学经验 </template>
					{{ courseSourceInfo.teacher_experience }}
				</el-descriptions-item>

				<el-descriptions-item span="2">
					<template #label> 文件列表 </template>
					<el-tag size="mini" type="info" v-for="item in handelStr(courseSourceInfo.file)" :key="item">
						<a :href="item">
							{{ handleFileNameStr(item) }}
						</a>
					</el-tag>
				</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<!-- <el-button size="mini" @click="courseSourcedialogVisible = false">取消</el-button> -->
					<el-button size="mini" type="primary" @click="courseSourcedialogVisible = false">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 多班备课对话框 -->
		<!-- <el-dialog
			v-model="manyClassDialogVisible"
			title="多班备课"
			width="70%"
			:before-close="manyClasshandleClose"
		>
			<span>This is a message</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="mini" @click="manyClassDialogVisible = false">关闭</el-button>
					<el-button size="mini" type="primary" @click="manyClassDialogVisible = false"
						>确定</el-button
					>
				</span>
			</template>
		</el-dialog> -->
		<!-- 查询班级学生上课记录抽屉框 -->

		<el-dialog v-model="ClassStudentsClassDetailVisible" title="学生上课记录" width="80%">
			<el-table :data="classStudentsClassDetail" :header-cell-style="{
				'text-align': 'center',
				'font-size': '15px',
				'font-weight': '1000px',
				'font-family': '微软雅黑'
			}" :cell-style="{
	'text-align': 'center',
	'font-size': '14px',
	'font-weight': '0',
	margin: 0 + 'px',
	padding: 0 + 'px',
	'font-family': '微软雅黑'
}" border v-fit-columns max-height="400px" style="width: 100%" ref="classStudentsClassDetail1">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="name" label="学生姓名" width="120" />
				<el-table-column prop="phase_name" label="课程大主题" />
				<el-table-column prop="section_theme" label="上课主题" width="150" />
				<el-table-column prop="class_date" label="上课日期" width="100">
					<template #default="scope">
						<el-tag size="mini">{{ handleClassDate(scope.row.class_date) }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="teacherName" label="上课教师" width="100" />
				<el-table-column prop="classgroupName" label="上课班级" width="200" />
				<el-table-column prop="learning_goals" label="课程学习目标" width="200" />
				<el-table-column prop="common_use_num" label="常规课消耗课时" width="100" />
				<el-table-column prop="special_use_num" label="特殊课消耗课时" width="100" />
				<el-table-column prop="comments" label="课堂评价" width="100" />
				<el-table-column prop="rate" label="课堂评分" width="100">
					<template #default="scope">
						<el-rate disabled>{{ parseInt(scope.row.rate) }}</el-rate>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<cl-export-btn type="success" :columns="excelTable.columns" :data="classStudentsClassDetail">导出学生上课记录
					</cl-export-btn>
					<el-button size="mini" type="primary" @click="ClassStudentsClassDetailVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, onMounted, computed, nextTick } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import { Message, MessageBox } from "@element-plus/icons";
import { ElMessage } from "element-plus";
import {  forEach } from "lodash";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 控制是否显示cl-table表格
		const is_show = ref(true);

		const classgroupInfoList = ref({});

		const returnBtn = () => {
			is_show.value = true;
			course_theme.value = ""
			activeName.value = null;
			searchRuleForm.manyClassCourseCourseType = null
			classgroup_students.value = [];
			refs.value.crud.refresh();
		};

		// 计算属性
		const handleCourseStudents = computed(() => {
			return function (info) {
				if (info) {
					return info.split(";");
				}
			};
		});

		// 截取日期的前11位

		const handleClassDate = computed(() => {
			return function (info) {
				if (info) {
					return info.slice(0, 11);
				}
				return "";
			};
		});

		// 计算属性
		const handleCourseStudents1 = computed(() => {
			return function (info) {
				if (info) {
					return info.split(",");
				}
			};
		});

		// 计算属性
		const handleCourseStudents2 = computed(() => {
			return function (item, index) {
				if (index === 0) {
					return "warning";
				}
				if (item.slice(0, 1) === "1") {
					return "info";
				} else {
					return "";
				}
			};
		});

		const allCourseSystem = ref([]);
		const allClassCourseStudents: any = ref([]);

		// el-table高度自适应
		const tableHeight: any = ref(0);
		// 1、定义一个响应式变量
		const classCourseTable = ref(null);

		// 1、定义一个响应式变量
		const courseSystemTable = ref(null);

		const classInfo = ref(null);

		// 定义班级学生列表信息
		const classgroup_students = ref([]);

		// 定义获取班级学生列表
		const getClassgroupList = async (id) => {
			const res = await service.classgroupStudentsService.list({ classgroup_id: id });
			if (res) {
				classgroup_students.value = res;
			}
		};

		// 定义班级学生上课记录列表
		const classStudentsClassDetail = ref([]);

		// 定义抽屉框显示或者取消
		const ClassStudentsClassDetailVisible = ref(false);

		// 导出按钮列配置
		const excelTable = reactive({
			columns: [
				{
					label: "学生姓名",
					prop: "name",
					minWidth: 150
				},
				{
					label: "课程大主题",
					prop: "phase_name",
					minWidth: 150
				},
				{
					label: "上课主题",
					prop: "section_theme",
					minWidth: 150
				},
				{
					label: "授课教师",
					prop: "teacherName",
					minWidth: 150
				},
				{
					label: "上课时间",
					prop: "class_date",
					minWidth: 150
				},
				{
					label: "常规课消耗课时",
					prop: "common_use_num",
					minWidth: 150
				},
				{
					label: "特殊课消耗课时",
					prop: "special_use_num",
					minWidth: 150
				},
				{
					label: "上课班级",
					prop: "classgroupName",
					minWidth: 150
				},
				{
					label: "课程学习目标",
					prop: "learning_goals",
					minWidth: 150
				},
				{
					label: "课堂评分",
					prop: "rate",
					minWidth: 150
				},
				{
					label: "课堂评价",
					prop: "comments",
					minWidth: 150
				}
			]
		});

		// 获取班级学生上课记录

		const getClassStudentsClassDetail = async function (id) {
			ClassStudentsClassDetailVisible.value = true;

			const res = await service.classTeachingService.classStudentsClassDetail({ id: id });
			console.log(res);

			if (res) {
				classStudentsClassDetail.value = res;
			}
		};

		// 定义一个变量用来存储单个班级的id
		const classId = ref(null);

		async function show(id, course_type) {
			// 重置课程主题
			course_theme.value = "";
			classId.value = id;
			data.multipleSelection = [];
			is_show.value = false;
			classgroupInfoList.value = [];
			searchRuleForm.manyClassCourseCourseType = parseInt(course_type);
			getPhaseNameFilters()
			getIsUseFilters()
			if (id) {
				const classgroup = await service.classgroupService.info({ id: id });
				console.log(classgroup);

				classgroupInfoList.value = {
					name: classgroup.class_date + classgroup.class_name + classgroup.class_number,
					class_time:
						classgroup.class_week +
						":" +
						classgroup.class_start_time +
						"-" +
						classgroup.class_end_time,
					start_date: classgroup.start_date.slice(0, 10),
					end_date: classgroup.end_date.slice(0, 10),
					studentName: classgroup.studentName,
					course_name: classgroup.course_name,
					classroom: classgroup.classroom,
					teacherName: classgroup.teacherName
				};
			}
			// 通过course_type获取课程类型下所有的课程\

			let res = await service.courseSystemService.courseList({
				classgroup_id: id,
				course_type: course_type
			});
			let ret = await service.courseSystemService.classCourseStudents({
				classgroup_id: id,
				course_type: course_type
			});
			console.log(ret, "rettt");

			allCourseSystem.value = res;
			ret.forEach((item) => {
				item.isUse = Boolean(item.isUse);
			});
			allClassCourseStudents.value = ret;

			// 获取班级学生信息
			getClassgroupList(id);

			// getClassStudentsClassDetail({id:id,course_type:course_type})

			await nextTick(() => {
				tableHeight.value =
					document.body.clientHeight - (classInfo.value.$el.clientHeight + 360);
			});

			console.log(refs.value.elTabs, "+++++++++++++++");
		}

		// mehods里面定义showTabPane方法
		// function showTabPane(control, pane) {
		// 	let dom = "";
		// 	this.$nextTick(() => {
		// 		dom = document.getElementById(pane);
		// 		if (control == 1) {
		// 			dom.style.display = "inline-block";
		// 		} else {
		// 			dom.style.display = "none";
		// 		}
		// 	});
		// }
		const resetWindow = function (size) {
			if (classInfo) {
				tableHeight.value = document.body.clientHeight - (size + 360);
			}
			// alert(tableHeight.value)
			// alert(classInfo.value.$el.clientHeight)
		};

		// 监听窗口大小变化
		window.onresize = function () {
			if (classInfo) {
				tableHeight.value =
					document.body.clientHeight - (classInfo.value.$el.clientHeight + 360);
			}
		};

		// 定义班级列表
		const class_number_list = ref([]);

		// 保存登录用户的关联的教师id
		const teacherId = function () {
			const userInfo = JSON.parse(localStorage.getItem("userInfo")).teacher;
			console.log(userInfo);

			if (userInfo) {
				return userInfo.id;
			} else {
				return null;
			}
		};

		// 获取当前年份
		const getNowYear = function () {
			let date = new Date();
			date.getFullYear(); //获取完整的年份(4位)
			let season = "";
			if (date.getMonth() + 1 >=2  && date.getMonth() + 1 <= 7) {
				season = "春季";
			}else if ((date.getMonth() + 1 >=9  && date.getMonth() + 1 <= 12) || date.getMonth() + 1 === 1) {
				season = "秋季";
			}
			return date.getFullYear() + "年" + season;
		};

		const form = ref({
			class_number: "",
			class_date: getNowYear(),
			class_course_type: "",
			class_class_classroom: "",
			class_type: 1,
			class_teacher: teacherId(),
			student_id: ""
		});

		// 刷新监听
		async function onRefresh(params: any, { next, render }: any) {
			const { list } = await next(params);

			render(
				list.map((e: any) => {
					if (e.class_students) {
						e.class_students_list = e.class_students.split(",");
					}

					// e.status = Boolean(e.status);

					return e;
				})
			);
		}

		// 获取班级号
		const getClassNum = async function () {
			const res = await service.base.system.param.list({ keyName: "class_number" });

			let classNum = eval("(" + res[0].data + ")");
			classNum.forEach((item) => {
				class_number_list.value.push({
					value: "" + item.value,
					label: item.label
				});
			});
		};

		// 定义学生信息列表
		const students_list = ref([]);
		// 获取学生信息
		const getStudents = async function () {
			const res = await service.studentService.list();
			res.forEach((item, index) => {
				students_list.value.push({
					value: "" + item.id,
					label: item.name + " " + item.student_id
				});
			});
		};
		// 定义教师信息列表
		const teachers_list = ref([]);
		// 拼接教师信息请求路径
		// 获取教师信息
		const getTeacher = async function () {
			const res = await service.teacherService.list();

			const filteredItems = res.filter(item => item.is_work === 1);

			filteredItems.forEach((item, index) => {
				teachers_list.value.push({
					value: item.id,
					label: item.name
				});
			});
		};
		// 定义课程类型列表
		const course_type = ref([]);
		// 获取课程类型
		const getCourseType = async function () {
			const res = await service.courseTypeService.list();
			res.forEach((item, index) => {
				course_type.value.push({
					value: item.id,
					label: item.course_id,
					type: "warning"
				});
			});
		};

		// 定义上课教室列表
		const classroom_list = ref([]);
		// 获取课程类型
		const getClassroom = async function () {
			const res = await service.classroomService.list();
			res.forEach((item, index) => {
				classroom_list.value.push({
					value: "" + item.id,
					label: item.name,
					type: "danger"
				});
			});
		};

		// 定义班级类型
		const class_type_list = ref([]);
		// 获取班级号
		const getClassType = async function () {
			const res = await service.base.system.param.list({ keyName: "class_type" });
			let classType = eval("(" + res[0].data + ")");
			classType.forEach((item) => {
				class_type_list.value.push({
					value: item.value,
					label: item.label,
					type: "success"
				});
			});
		};

		// 定义班级日期
		const class_date_list = ref([]);
		// 获取班级日期
		const getClassDate = async function () {
			const res = await service.base.system.param.list({ keyName: "class_date" });
			// 将json字符串转换为json对象
			let classDate = eval("(" + res[0].data + ")");
			classDate.forEach((item) => {
				class_date_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "info"
				});
			});
		};

		// 定义班级等级
		const class_level_list = ref([]);

		// 获取班级等级
		const getClassLevel = async function () {
			const res = await service.base.system.param.list({ keyName: "class_level" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item) => {
				class_level_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "warning"
				});
			});
		};

		onMounted(async () => {
			// 获取所有教师信息
			getTeacher();
			// 获取所有学生信息
			getStudents();
			// 获取班级号
			getClassNum();
			// 获取课程类型
			getCourseType();
			// 获取班级类型
			getClassType();
			// 获取班级日期
			getClassDate();
			// 获取教室
			getClassroom();
			// 获取班级等级
			getClassLevel();
			searchSubmit();
		});

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "class_name",
					label: "班级名称",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入班级名称"
						}
					},
					rules: {
						required: true,
						message: "班级名称不能为空"
					}
				},
				{
					prop: "class_course_type",
					label: "课程类型",
					span: 12,
					component: {
						name: "el-select",
						options: course_type.value,
						props: {
							placeholder: "请选择班级课程类型",
							filterable: true
						}
					},
					rules: {
						required: true,
						message: "班级课程类型不能为空"
					}
				},
				{
					prop: "class_date",
					label: "班级日期",
					span: 12,
					value: getNowYear(),
					component: {
						name: "el-select",
						options: class_date_list.value,
						props: {
							placeholder: "请选择班级日期"
						}
					},
					rules: {
						required: true,
						message: "班级日期不能为空"
					}
				},
				{
					prop: "class_type",
					label: "班级类型",
					span: 12,
					value: "1",
					component: {
						name: "el-select",
						options: class_type_list.value,
						props: {
							placeholder: "请输入班级类型"
						}
					},
					rules: {
						required: true,
						message: "班级类型不能为空"
					}
				},
				{
					prop: "start_date",
					label: "开学日期",
					span: 12,
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请输入开学日期"
						}
					},
					rules: {
						required: true,
						message: "开学日期不能为空"
					}
				},
				{
					prop: "end_date",
					label: "结课日期",
					span: 12,
					component: {
						name: "el-date-picker",
						props: {
							placeholder: "请输入结课日期"
						}
					},
					rules: {
						required: true,
						message: "结课日期不能为空"
					}
				},
				{
					prop: "class_number",
					label: "班级号",
					span: 12,
					component: {
						name: "el-select",
						options: class_number_list.value,
						props: {
							placeholder: "请输入班级号"
						}
					},
					rules: {
						required: true,
						message: "班级号不能为空"
					}
				},
				{
					prop: "class_teacher",
					label: "上课老师",
					span: 12,
					value: teacherId(),
					component: {
						name: "el-select",
						options: teachers_list.value,
						props: {
							placeholder: "请输入班级上课老师"
						}
					},
					rules: {
						required: true,
						message: "班级上课老师不能为空"
					}
				},
				{
					prop: "class_class_classroom",
					label: "上课教室",
					span: 12,
					component: {
						name: "el-select",
						options: classroom_list.value,
						props: {
							placeholder: "请选择班级上课教室"
						}
					},
					rules: {
						required: true,
						message: "班级上课教室不能为空"
					}
				},
				{
					prop: "class_level",
					label: "班级等级",
					span: 12,
					component: {
						name: "el-select",
						options: class_level_list.value,
						props: {
							placeholder: "请选择班级等级"
						}
					},
					rules: {
						required: true,
						message: "班级等级不能为空"
					}
				},
				{
					prop: "class_week",
					label: "上课星期",
					span: 12,
					component: {
						name: "el-select",
						options: [
							{
								label: "星期一",
								value: "星期一"
							},
							{
								label: "星期二",
								value: "星期二"
							},
							{
								label: "星期三",
								value: "星期三"
							},
							{
								label: "星期四",
								value: "星期四"
							},
							{
								label: "星期五",
								value: "星期五"
							},
							{
								label: "星期六",
								value: "星期六"
							},
							{
								label: "星期天",
								value: "星期天"
							}
						],
						props: {
							placeholder: "请选择班级上课星期"
						}
					},
					rules: {
						required: true,
						message: "班级上课星期不能为空"
					}
				},
				{
					prop: "class_start_time",
					label: "开始时间",
					span: 12,
					component: {
						name: "el-time-select",
						start: "08:30",
						step: "00:15",
						end: "19:30",
						props: {
							placeholder: "请输入上课开始时间"
						}
					},
					rules: {
						required: true,
						message: "上课开始时间不能为空"
					}
				},
				{
					prop: "class_end_time",
					label: "结束时间",
					span: 12,
					component: {
						name: "el-time-select",
						start: "08:30",
						step: "00:15",
						end: "19:30",
						props: {
							placeholder: "请输入上课结束时间"
						}
					},
					rules: {
						required: true,
						message: "上课结束时间不能为空"
					}
				},
				{
					prop: "class_students",
					label: "班级学生",
					span: 12,
					// hook: {
					// 	bind: (value, form) => {
					// 	// value 是与 prop 绑定的值
					// 	// form 是表单值
					// 	console.log(value);

					// 	return value.split(",").map(Number).filter(Boolean); // 结果为：[1, 2, 3],  // 绑定通道流程，分割 -> 转成number -> 绑定值
					// 	}
					// },
					// value:16,
					// component: studentList,
					component: {
						name: "studentList",
						props: {
							placeholder: "请输入班级学生"
						}
						// multiple: true,
						// clearable: true,
						// filterable: true,
						// options: students_list.value
					},
					rules: {
						required: true,
						message: "班级学生不能为空"
					}
				}
				// {
				// 	prop: "class_date",
				// 	label: "班级日期",
				// 	span: 24,
				// 	value: 1,
				// 	component: {
				// 		name: "el-radio-group",
				// 		options: [
				// 			{
				// 				label: "男",
				// 				value: 1
				// 			},
				// 			{
				// 				label: "女",
				// 				value: 0
				// 			}
				// 		]
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "性别不能为空"
				// 	}
				// },
				// {
				// 	prop: "birthday",
				// 	label: "出生日期",
				// 	span: 24,
				// 	component: {
				// 		name: "el-date-picker",
				// 		props: {
				// 			placeholder: "请选择出生日期"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "出生日期不能为空"
				// 	}
				// },
				// {
				// 	prop: "phone",
				// 	label: "手机号",
				// 	span: 24,
				// 	component: {
				// 		name: "el-input",
				// 		props: {
				// 			placeholder: "请输入手机号"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "手机号不能为空"
				// 	}
				// },
				// {
				// 	prop: "status",
				// 	label: "状态",
				// 	span: 24,
				// 	value: 2,
				// 	component: {
				// 		name: "el-radio-group",
				// 		options: [
				// 			{
				// 				label: "停学",
				// 				value: 0
				// 			},
				// 			{
				// 				label: "停课",
				// 				value: 1
				// 			},
				// 			{
				// 				label: "在读",
				// 				value: 2
				// 			}
				// 		]
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "状态不能为空"
				// 	}
				// },
				// {
				// 	prop: "into_date",
				// 	label: "报名日期",
				// 	span: 24,
				// 	component: {
				// 		name: "el-date-picker",
				// 		props: {
				// 			placeholder: "请选择报名日期"
				// 		}
				// 	},
				// 	rules: {
				// 		required: true,
				// 		message: "报名日期不能为空"
				// 	}
				// },
				// {
				// 	prop: "stop_time",
				// 	label: "暂停时间",
				// 	span: 24,
				// 	component: {
				// 		name: "el-date-picker",
				// 		props: {
				// 			placeholder: "请选择暂停时间"
				// 		}
				// 	}
				// },
				// {
				// 	prop: "note",
				// 	label: "备注",
				// 	span: 24,
				// 	component: {
				// 		name: "el-input",
				// 		type: "textarea",
				// 		size: "medium",
				// 		props: {
				// 			placeholder: "请输入备注"
				// 		}
				// 	}
				// }
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: [
				{
					type: "selection",
					width: 60
				},
				{
					type: "index",
					label: "#",
					width: 60
				},
				{
					prop: "class_date",
					label: "班级日期",
					width: 120,
					dict: class_date_list.value
				},
				{
					prop: "class_name",
					label: "班级名称"
					// width: 120
				},
				{
					prop: "class_number",
					label: "班级号",
					width: 120,
					dict: class_number_list.value
				},
				{
					prop: "class_course_type",
					label: "班级课程类型",
					width: 140,
					dict: course_type.value
				},
				{
					prop: "class_type",
					label: "班级类型",
					width: 120,
					dict: class_type_list.value
				},
				{
					prop: "class_teacher",
					label: "班级任课老师",
					width: 120,
					dict: teachers_list.value
				},
				{
					prop: "class_class_classroom",
					label: "班级上课教室",
					width: 160,
					dict: classroom_list.value
				},
				// {
				// 	prop: "start_date",
				// 	label: "开课日期",
				// 	width: 100
				// },
				{
					prop: "class_time",
					label: "上课时间",
					width: 150
				},
				{
					prop: "class_students",
					label: "学生",
					width: 300,
					dict: students_list.value
				},
				{
					label: "操作",
					type: "op",
					width: 80,
					buttons: ["slot-btn"]
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.classgroupService).done();
			app.refresh();
		}

		// 筛选按钮提交
		const searchSubmit = function () {
			console.log(form.value.class_number);
			refs.value.crud.refresh({ ...form.value });
		};
		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				class_number: "",
				class_date: "",
				class_course_type: "",
				class_class_classroom: "",
				class_type: "",
				class_teacher: "",
				student_id: ""
			};
			refs.value.crud.refresh({ ...form.value });
		};

		const getCourceSourceInfo = async function (id) {
			const res = await service.courseSourceService.infoRaw({ id: id });
			return res;
		};
		// 定义课程资源信息对话框是否显示
		const courseSourcedialogVisible = ref(false);

		const courseSourceInfo: any = ref({});

		const handelStr = computed(() => {
			return function (str) {
				if (str !== undefined && str !== null && str !== "") {
					return str.split(",");
				}
				return "";
			};
		});

		const handelLevel = computed(() => {
			return function (str) {
				if (str !== undefined && str !== null && str !== "") {
					switch (str) {
						case 1:
							return "☆";
						case 2:
							return "☆☆";
						case 3:
							return "☆☆☆";
						case 4:
							return "☆☆☆☆";
						case 5:
							return "☆☆☆☆☆";
					}
				}
				return "";
			};
		});

		// 处理课程详细对话框
		const openCourseSourceInfo = async (id) => {
			const res = await getCourceSourceInfo(id);

			if (!res) {
				return ElMessage("数据请求失败");
			}
			courseSourceInfo.value = res[0];
			courseSourceInfo.value.isUse = Boolean(courseSourceInfo.value.isUse);
			console.log(courseSourceInfo.value);

			courseSourcedialogVisible.value = true;
		};

		const handleFileNameStr = computed(() => {
			return function (str) {
				if (str.length > 0) {
					let index = str.lastIndexOf("/");
					str = str.substring(index + 1, str.length);
					return str;
				}
				return "";
			};
		});

		const data = reactive({
			multipleSelection: []
		});

		// 设置cl-table选择更新钩子函数
		const handleSelectionChange = function (val: any) {
			console.log(val);

			data.multipleSelection = [];
			if (val instanceof Array) {
				for (let i of val) {
					data.multipleSelection.push(i.id);
				}
				// alert(data.multipleSelection)
			} else {
				ElMessage("选择错误");
			}
		};

		// 多班备课
		const manyClassDialogVisible = ref(false);

		// 是否显示课程体系
		const isShowCourseSystem = ref(true);

		// 定义多班备课时选择课程类型
		const manyClassCourseCourseType = ref(null);

		// 定义详细对话框中的筛选
		const course_theme = ref("");

		// 搜索课程小主题
		const handleSearchCourseTheme = () => {
			getManyClassStudentClass(null, searchRuleForm.course_theme);
		};

		// 定义获取多个班级的学生上课情况
		const getManyClassStudentClass = async (vm, searchText = null) => {
			// alert(searchText)
			allClassCourseStudents.value = [];
			getPhaseNameFilters()
			let classgroupsId = null;
			if (data.multipleSelection.length > 1) {
				classgroupsId = data.multipleSelection;
			} else {
				classgroupsId = classId.value;
			}
			const res = await service.courseSystemService.manyClassCourseStudents({
				classgroupsId: classgroupsId,
				courseType: searchRuleForm.manyClassCourseCourseType,
				courseTheme: searchText
			});

			if (!res) {
				return ElMessage("数据获取失败");
			}
			res.info.forEach((item) => {
				item.isUse = Boolean(item.isUse);
			});
			allClassCourseStudents.value = res.info;
			let fullClassName = "";
			res.className.forEach((item, index) => {
				if (index === res.className.length - 1) {
					return (fullClassName += item.className);
				}
				fullClassName += item.className + ",";
			});
			classgroupInfoList.value.name = fullClassName;
			let fullClassStudents = "";
			res.classStudents.forEach((item, index) => {
				if (index === res.classStudents.length - 1) {
					return (fullClassStudents += item.classStudents);
				}
				fullClassStudents += item.classStudents + ",";
			});
			classgroupInfoList.value.studentName = fullClassStudents;
			return res;
		};

		// 班级名称显示，多班或者一个班
		const classNames = computed(() => {
			return function (str) {
				if (str) {
					return str.split(",");
				}
				return "";
			};
		});

		// 打开多班备课对话框
		const openManyClassDialog = () => {
			// 重置班级信息
			classgroupInfoList.value = [];
			// 重置课程体系
			allCourseSystem.value = [];
			// 重置课程上课记录
			allClassCourseStudents.value = [];
			// 请求数据
			if (!(data.multipleSelection.length > 1)) {
				return ElMessage("至少要两个班级才能进行班级备课查询");
			}
			getManyClassStudentClass(null);

			is_show.value = false;

			isShowCourseSystem.value = false;

			// refs.value.elTabs.$children[0].$refs.tabs[0].style.display = 'none';
			// console.log(refs.value.elTabs.$children[0].$refs);
			// console.log(refs.value.elTabs.$children[0].$refs.tabs)

			// manyClassDialogVisible.value = true;
		};

		const manyClasshandleClose = () => { };

		// 手风琴默认展开
		const activeName = ref(null);

		// 用来保存上一次的描述页的高度
		let lastHeight = 0;

		// 处理手风琴change事件
		const handleChange = (val) => {
			// alert(val);
			// alert(classInfo.value.$el.clientHeight)
			if (val !== "1") {
				resetWindow(-30);
				lastHeight = classInfo.value.$el.clientHeight;
			} else {
				resetWindow(lastHeight);
			}
		};
		const elTabSelect = ref("classStudent")

		const filterHandler = (
			value,
			row,
			column
		) => {
			const property = column['property']
			return row[property] === value
		}

		const isUsefilterHandler = (
			value,
			row,
			column
		) => {
			const property = column['property']
			return row[property] === value
		}

		const phaseNameFilters = ref([])
		const getPhaseNameFilters = async function () {
			phaseNameFilters.value = []
			const res = await service.courseSystemService.list({ course_type: searchRuleForm.manyClassCourseCourseType })
			if (res) {
				res.forEach(element => {
					phaseNameFilters.value.push({ text: element.phase_name, value: element.phase_name })
				});

			}
			console.log(res, "111111111");

		}

		const isUseFilters = ref([])
		const getIsUseFilters = async function () {
			isUseFilters.value = []
			// const res = await service.courseSystemService.list({course_type:searchRuleForm.manyClassCourseCourseType})
			// if(res){
			// 	res.forEach(element => {
			// 		isUseFilters.value.push({text:element.phase_name,value:element.phase_name})
			// 	});

			// }
			isUseFilters.value.push({ text: "启用", value: true })
			isUseFilters.value.push({ text: "停用", value: false })

		}

		const searchRuleForm = reactive({
			manyClassCourseCourseType: undefined,
			course_theme: undefined
		})
		const searchRules = reactive<any>({
			manyClassCourseCourseType: [
				{ required: true, message: '请选择课程类型', trigger: 'blur' },
			],
			course_theme: [
				{ required: false, message: 'Please input Activity name', trigger: 'blur' },
			],

		})

		const ruleFormRef = ref()

		const submitForm = async (formEl) => {

			if (!formEl) return
			await formEl.validate((valid, fields) => {
				// console.log(valid, "+++++++++++++++++");

				if (valid) {
					handleSearchCourseTheme()
				} else {
					// alert(1)
				}
			})
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			getClassNum,
			onRefresh,
			students_list,
			class_type_list,
			form,
			searchSubmit,
			class_number_list,
			class_date_list,
			course_type,
			teachers_list,
			classroom_list,
			resetSerach,
			is_show,
			show,
			classgroupInfoList,
			returnBtn,
			// 该班级的课程类型下的课程体系
			allCourseSystem,
			allClassCourseStudents,
			handleCourseStudents,
			handleCourseStudents1,
			handleCourseStudents2,
			openCourseSourceInfo,
			courseSourcedialogVisible,
			courseSourceInfo,
			handelStr,
			handelLevel,
			tableHeight,
			classCourseTable,
			courseSystemTable,
			classInfo,
			handleFileNameStr,
			handleSelectionChange,
			data,
			manyClassDialogVisible,
			openManyClassDialog,
			isShowCourseSystem,
			manyClassCourseCourseType,
			getManyClassStudentClass,
			classNames,
			activeName,
			handleChange,
			course_theme,
			handleSearchCourseTheme,
			classgroup_students,
			classStudentsClassDetail,
			getClassStudentsClassDetail,
			ClassStudentsClassDetailVisible,
			excelTable,
			handleClassDate,
			elTabSelect,
			filterHandler,
			isUsefilterHandler,
			phaseNameFilters,
			getPhaseNameFilters,
			isUseFilters,
			searchRuleForm,
			searchRules,
			submitForm,
			ruleFormRef
		};
	}
});
</script>

<style lang="less">
.root {
	// flex: auto;
	height: 100%;
	width: 100%;
	// display: flex;
	// flex-direction: column;
	// :deep {
	// 	.el-tabs__content {
	// 		flex-grow: 1;
	// 		overflow-y: scroll;
	// 	}
	// }
}

.el-table__column-filter-trigger i {
	font-size: 24px !important;
}

.el-card-define {
	min-height: 100%;
	height: 100%;
}


// .el-card-define >>> .el-card__body {
//   height: 100%;
// }
</style>